<style lang="scss" scoped>
@import "../../css/list.scss";
header {
  height: 0.45rem;
  line-height: 0.45rem;
  background: #f5f5f5;
}
main {
  .state li {
    height: 0.5rem;
    .state_size {
      width: 0.7rem;
      height: 0.25rem;
    }
    .triangle-l {
      width: 0;
      height: 0;
      border-top: 0.128rem solid transparent;
      border-right: 0.15rem solid #e12825;
      border-bottom: 0.128rem solid transparent;
      left: -0.15rem;
      top: 0;
    }
  }
}
</style>

<template>
    <div class="exchange_record full bgfff">
        <header class="text-c flex-col">
            <div class="box1" :class="success ? 'cred' : ''" @click="cutNav(1)">兑换成功</div>
            <div class="box1" :class="auditing ? 'cred' : ''" @click="cutNav()">待审核</div>
        </header>
        <main>
            <ul class="success" v-show="success">
                <li class="commodity_it" v-show="!doneEmpty" v-for="(it,i) in doneList" @click="toRouter(it.orderCode)">
                    <ul class="state padding-lr15">
                        <li class="flex-col flex-middle border-b">
                            <div class="box1">智能屋</div>
                            <div class="position-r">
                                <div class="bgred cfff state_size box-center font-12">交易成功</div>
                                <div class="triangle-l position-a"></div>
                            </div>
                        </li>
                    </ul>
                    <div class="commodity bgfff  padding-15 flex-col">
                        <div class="img-bg commodity_img" :style="{backgroundImage:`url(${it.imgurl})`}"></div>
                        <div class="box1 padding-l15 flex-row">
                            <div class="box1 flex-col flex-middle">{{it.commodityName}}</div>
                            <div class="flex-col box1 flex-middle">
                                <div class="box1 c82">
                                    <span class="cred">{{it.orderPrice}}</span>积分
                                </div>
                                <span>*{{it.commodityNumber}}</span>
                            </div>
                        </div>
                    </div>
                    <ul class="price padding-lr15 bgfff">
                        <li class="flex-col flex-right border-t">
                            共{{it.commodityNumber}}件商品 &nbsp;&nbsp;合计
                            <span class="cred">{{it.orderPrice*it.commodityNumber}}</span>积分
                        </li>
                    </ul>
                    <div class="interval"></div>
                </li>
                <li class="box-center" v-show="doneEmpty">
                    <div class="empty c82">暂无兑换记录</div>
                </li>
            </ul>
            <ul class="auditing" v-show="auditing">
                <li class="commodity_it" v-show="!handelEmpty" v-for="(it,i) in handelList" @click="toRouter(it.orderCode)">
                    <ul class="state padding-lr15">
                        <li class="flex-col flex-middle border-b">
                            <div class="box1">智能屋</div>
                            <div class="position-r">
                                <div class="bgred cfff state_size box-center font-12">审核中</div>
                                <div class="triangle-l position-a"></div>
                            </div>
                        </li>
                    </ul>
                    <div class="commodity bgfff  padding-15 flex-col">
                        <div class="img-bg commodity_img" :style="{backgroundImage:`url(${it.imgurl})`}"></div>
                        <div class="box1 padding-l15 flex-row">
                            <div class="box1 flex-col flex-middle">{{it.commodityName}}</div>
                            <div class="flex-col box1 flex-middle">
                                <div class="box1 c82">
                                    <span class="cred">{{it.orderPrice}}</span>积分
                                </div>
                                <span>*{{it.commodityNumber}}</span>
                            </div>
                        </div>
                    </div>
                    <ul class="price padding-lr15 bgfff">
                        <li class="flex-col flex-right border-t">
                            共{{it.commodityNumber}}件商品 &nbsp;&nbsp;合计
                            <span class="cred">{{it.orderPrice*it.commodityNumber}}</span>积分
                        </li>
                    </ul>
                    <div class="interval"></div>
                </li>
                <li class="box-center" v-show="handelEmpty">
                    <div class="empty c82">暂无兑换记录</div>
                </li>
            </ul>
        </main>
    </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  name: "",
  data() {
    return {
      auditing: false,
      success: true,
      donePage: 0, // 完成订单页码
      handelPage: 0, // 进行中的订单
      pageSize: 5, // 每页请求条数
      handelTotalPage: 0,
      doneTotalPage: 0,
      doneEmpty: false,
      handelEmpty: false,
      doneList: [],
      handelList: []
    };
  },
  mounted() {
    let that = this;
    this.$nextTick(() => {
      that.getOrder(1);
    });
  },
  filters: {
    toImg(url) {
      return "../../image/data/userimg8.jpg";
    }
  },
  methods: {
    /**
     * 请求订单列表
     * orderStatus =1完成 =0审核中
     * has 是否加载更多 true= 加载更多
     */
    getOrder(orderStatus, has = false) {
      let page,
        pageSize = this.pageSize,
        that = this;
      if (orderStatus) {
        page = that.donePage = ++that.donePage;
        if (has && page > this.doneTotalPage) {
          this.layer("没有更多了", "m");
          return;
        }
      } else {
        page = that.handelPage = ++that.handelPage;
        if (has && page > this.handelTotalPage) {
          this.layer("没有更多了", "m");
          return;
        }
      }
      this.http
        .post("order/list", {
          page: page,
          limit: pageSize,
          orderStatus: orderStatus
        })
        .then(res => {
          if (orderStatus) {
            console.log(JSON.stringify(that.doneList));
            that.doneList.push(res.data.list);
            console.log(JSON.stringify(that.doneList));
            that.doneTotalPage = Math.ceil(res.data.totalPage / pageSize);

            // 第一次，列表没有数据
            if (!has && res.data.list.length === 0) {
              that.doneEmpty = true;
            } else that.doneEmpty = false;
          } else {
            that.handelTotalPage = Math.ceil(res.data.totalPage / pageSize); //总页数

            if (!has)
              that.handelList = res.data.list; //第一次
            else that.handelList.push(res.data.list); //加载更多

            // 第一次，列表没有数据
            if (!has && res.data.list.length == 0) that.handelEmpty = true;
            else that.handelEmpty = false;
          }
        })
        .catch(err => {});
    },
    // 订单状态切换
    cutNav(has) {
      if (has) {
        this.success = true;
        this.auditing = false;
      } else {
        this.success = false;
        this.auditing = true;
        if (this.handelPage === 0) {
          this.getOrder(0);
        }
      }
    },
    toRouter(id) {
      this.$router.push({
        path: '/order_info',
        query: { id },
        meat: {
          title: "订单详情"
        }
      });
    }
  }
};
</script>


